<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>华猫商城</title>
		<style></style>
		<link href="../css/jquery.validator.css" rel="stylesheet">
		<link href="../css/common.css" rel="stylesheet">

		<link href="../plugin/userLib/css/user.css" rel="stylesheet">
		<link href="../plugin/userLib/css/userinfo.css" rel="stylesheet">
		<link href="../plugin/userLib/css/my_user.css" rel="stylesheet">
		<link href="../css/base.css" rel="stylesheet">
		<link href="../plugin/userLib/css/shop.css" rel="stylesheet">
		<style>
			.n-default .n-left,
			.n-default .n-right {
				margin-top: 32px!important;
			}
		</style>
	</head>

	<body>
		<div id="header"></div>
		<div id="headerBox"></div>
		<!--<div id="nav_menu"></div>-->
		<div class="ZZHT-wrap">
			<div class="ZZHT-header" style="border-bottom: 1px solid #ffffff;">
				<div class="ZZHT-shop-nav">
					<div class="ZZHT-nav-box">
						<a href="#">
							<li class="liselect ZZHT-lfloat ZZHT-nav-boxa">商城商家</li>
						</a>
						<div class="ZZHT-clear"></div>
					</div>
				</div>
				<div class="ZZHT-clear"></div>
			</div>
			<div class="ZZHT-main">
				<div id="onLine_left"></div>
				<div class="ZZHT-content">

					<div class="ZZHT-body">
						<div class="ZZHT-user-head clearfix"><span class="left fl">商品分类</span><span class="right fr">当前位置：商品管理--商品分类</span></div>
						<div class="toolbarDiv clearfix">
							<span></span>
							<span class="fredBtn sortBtn" @click="addCat(0)">新增</span>
						</div>
						<div class="list_main">
							<form autocomplete="off">
								<table id="cat_list_tab" class="ZZHT-list ZZHT-form">
									<thead>
										<tr class="ZZHT-colour">
											<th class="ZZHT-fre-th">名称</th>
											<th width="60">排序号</th>
											<th width="80" style="line-height: normal;">是否显示<br><span style="font-weight:normal;color:red;">(双击可修改)</span></th>
											<th width="150">操作</th>
										</tr>
									</thead>
									<tbody v-for="(v,i) in menu" v-if="v.parentId==0">
										<tr :id='"tr_"+v.catId' isload="1">
											<td class="ZZHT-fre-td">
												<span class="ZZHT-tree-open active" @click="treeCatOpen(v.catId)"><img class="ZZHT-lfloat" style="margin-top:24px;" src="../plugin/userLib/img/seller_icon_zk.png"></span>
												<input type="text" style="width:400px;" v-model="v.catName" :dataid="v.catId" @change="editCatName(v.catId)">
											</td>
											<td><input class="catsort" type="text" style="width:35px;" v-model="v.catSort" :dataid="v.catId" @change="editCatSort(v.catId)" onkeyup="javascript:ZZHT.isChinese(this,1)" onkeypress="return ZZHT.isNumberKey(event)"></td>
											<td style="cursor:pointer;" @dblclick="changeCatStatus(v.catId)">
												<span v-if='v.isShow=="1"' class="ZZHT-state_yes">
													<img class="ZZHT-lfloat" style="margin-top:3px;" src="../plugin/userLib/img/seller_icon_right.png">
												</span>
												<span v-else class="ZZHT-state_no">
													<img class="ZZHT-lfloat" style="margin-top:3px;" src="../plugin/userLib/img/seller_icon_error.png">
												</span>
											</td>
											<td>
												<a href="javascript:void(0);" @click="addCat(v.catId);" class="add btn ZZHT-fred" title="新增">新增</a>
												<a href="javascript:void(0);" @click="delCat(v.catId)" class="dels btn ZZHT-fred" title="删除">删除</a>&nbsp;
											</td>
										</tr>
										<tr v-for="(item,ind) in menu" v-if="item.parentId==v.catId" :id='"tr_1_"+v.catId' :class='"tr_1 tree_"+v.catId' isload="1">
											<td class="ZZHT-fre-td">
												<span class="ZZHT-tree-second"></span>
												<input type="text" style="width:400px;" v-model="item.catName" :dataid="item.catId" @change="editCatName(item.catId)">
											</td>
											<td><input class="catsort" type="text" style="width:35px;" v-model="item.catSort" :dataid="item.id" @change="editCatSort(item.catId)" onkeyup="javascript:ZZHT.isChinese(this,1)" onkeypress="return ZZHT.isNumberKey(event)"></td>
											<td style="cursor:pointer;" @dblclick="changeCatStatus(item.catId,v.catId)">
												<span v-if='item.isShow=="1"' class="ZZHT-state_yes">
													<img class="ZZHT-lfloat" style="margin-top:3px;" src="../plugin/userLib/img/seller_icon_right.png">
												</span>
												<span v-else class="ZZHT-state_no">
													<img class="ZZHT-lfloat" style="margin-top:3px;" src="../plugin/userLib/img/seller_icon_error.png">
												</span>
											</td>
											<td>
												<a href="#none" @click="delCat(item.catId)" class="dels btn ZZHT-fred" title="删除">删除</a>&nbsp;
											</td>
										</tr>
									</tbody>
								</table>
							</form>
							<div class="ZZHT-tbar-group list_footer">
								<button class="ZZHT-shop-but saveBtn hide" @click="batchSaveCats()" style="margin-right:20px;">保&nbsp;存</button>
								<button class="ZZHT-shop-but cancelBtn hide" @click="location.reload()">取&nbsp;消</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div style="clear:both;"></div>
			<br>
		</div>
		<div id="ck3"></div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../plugin/layer/layer.js"></script>
		<script type="text/javascript" src="../js/ljf_base.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/common_view.js"></script>
		<!--<script src="../plugin/userLib/js/shopcats.js"></script>-->
		<script>
			var shopId;
			var vm =new Vue({
				el:'.ZZHT-content',
				data:{
					menu:[],
				},
				methods:{
					addCat:function(id){//新增分类
						var data = [
							{
								"shopId":shopId,
								"parentId":id,
								"isShow":'1',
								"catName":'新增分类',
								"catSort":'0',
								"catImg":'',
							}
						];
						data = JSON.stringify(data);
						addOrChange(data);
					},
					treeCatOpen:function(id){
						treeCatOpen(id);
					},
					editCatName:function(id){//修改分类名称
						console.log(id);
						var menu = this.menu;
						$.each(menu,function(i,v){
							if(v.catId==id){
								var data = menu[i];
								delete data['createTime'];
								delete data['dataFlag'];
								var obj = [];
								obj.push(data);
								data = JSON.stringify(obj);
								addOrChange(data);
							}
						});
					},
					editCatSort:function(id){//修改分类排序
						console.log(id);
						var menu = this.menu;
						$.each(menu,function(i,v){
							if(v.catId==id){
								var data = menu[i];
								delete data['createTime'];
								delete data['dataFlag'];
								var obj = [];
								obj.push(data);
								data = JSON.stringify(obj);
								addOrChange(data);
							}
						});
					},
					changeCatStatus:function(id){
						console.log(id);
						console.log(id);
						var menu = this.menu;
						$.each(menu,function(i,v){
							if(v.catId==id){
								if(v.isShow==0){
									menu[i].isShow=1;
								}else{
									menu[i].isShow=0;
								}
								var data = menu[i];
								delete data['createTime'];
								delete data['dataFlag'];
								var obj = [];
								obj.push(data);
								data = JSON.stringify(obj);
								addOrChange(data);
							}
						});
					},
					delCat:function(id){//删除
						layer.confirm('确认删除？',function(index){
							$.ajax({
								type:"get",
								url:SURL+"sktShopCats/deleteCats",
								contentType:'application/json;charset=UTF-8',
								data:{"shopCatsId":id},
								success:function(res){
									layer.msg(res.message);
									getList();
								}
							});
							layer.close(index);
						})
					}
				}
			})
			$.get(SURL+'sktShops/findByUserId', {userId:localStorage.userId}, function (data, textStatus) {//获取店铺id
                shopId = data.entity[0].shopId;
				getList();
			});
			
			function getList(){//获取分类列表
				$.ajax({
					type:"get",
					url:SURL+"sktShopCats/selectList",
					data:{"shopId":shopId},
					contentType:'application/json;charset=UTF-8',
					success:function(res){
						console.log(res);
						vm.menu = res.entity;
					}
				});
			}
			function addOrChange(data){//新增或修改分类
				console.log(data);
				$.ajax({
					type:"post",
					url:SURL+"sktShopCats/addList",
					data:data,
					dataType:'json',
					contentType:'application/json;charset=UTF-8',
					success:function(res){
						console.log(res);
						if(res.messageCode=='200'){
							getList();
						}else{
							layer.msg(res.message);
						}
					}
				});
			}
			
			function treeCatOpen(id){//打开 关闭分类子类
				var obj = '#tr_'+id+' .ZZHT-tree-open';
			    if( $(obj).attr('class').indexOf('active') > -1 ){
			    	$(obj).removeClass('active');
			        $(obj).html('<img class="ZZHT-lfloat" style="margin-top:24px;" src="../plugin/userLib/img/seller_icon_sq.png">');
			        $('.tree_'+id).hide();
			    }else{
			    	$(obj).addClass('active');
			        $(obj).html('<img class="ZZHT-lfloat" style="margin-top:24px;" src="../plugin/userLib/img/seller_icon_zk.png">');
			        $('.tree_'+id).show();
			    }
			}
		</script>
	</body>

</html>